<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Absolute Position Round Corners - Shadow border</title>

<style type="text/css">
@import "rounded-corners.css";

.rounded-box {
    position: relative; /* Must set position to relative to locate child elements. */
    padding: 20px 25px 27px 20px; /* borders */
    background-color: yellow;
    border: 1px solid red;
    width: 400px;
    margin: 50px;
}

.top-left {
    background: url(top-left.png) no-repeat left top;
    width: 20px;
    height: 20px;
}

.top-right {
    background: url(top-right.png) no-repeat right top;
    width: 25px;
    height: 20px;
}

.top-border {
    left: 20px;
    right: 25px;
    background: url(top-border.png) repeat-x left top green;
    height: 20px;
}

.left-border {
    top: 20px;
    bottom: 27px;
    background: url(left-border.png) repeat-y left top green;
    width: 20px;
}

.right-border {
    top: 20px;
    bottom: 27px;
    background: url(right-border.png) repeat-y right top green;
    width: 25px;
}

.bottom-left {
    position: absolute;
    background: url(bottom-left.png) no-repeat left bottom;
    width: 20px;
    height: 27px;
}

.bottom-right {
    position: absolute;
    background: url(bottom-right.png) no-repeat right bottom;
    width: 25px;
    height: 27px;
}

.bottom-border {
    position: absolute;
    left: 20px;
    right: 25px;
    background: url(bottom-border.png) repeat-x left bottom green;
    height: 27px;
}

.rounded-content {
    background-color: white;
}
</style>
</head>
<body>
  <div class="rounded-box">
    <span class="top-left" style="background-image: url(shadow/top-left.png);"></span>
    <span class="top-right" style="background-image: url(shadow/top-right.png);"></span>
    <span class="top-border" style="background-image: url(shadow/top-border.png);"></span>
    <span class="left-border" style="background-image: url(shadow/left-border.png);"></span>
    <span class="right-border" style="background-image: url(shadow/right-border.png);"></span>
    <span class="bottom-left" style="background-image: url(shadow/bottom-left.png);"></span>
    <span class="bottom-right" style="background-image: url(shadow/bottom-right.png);"></span>
    <span class="bottom-border" style="background-image: url(shadow/bottom-border.png);"></span>
    <div class="rounded-content" style="background-image: url(shadow/content.png);">
      <div>
        <!-- CONTENT BEGIN -->
        <div>this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</div>
        <div>this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</div>
        <!-- CONTENT END -->
      </div>
    </div>

  </div>

</body>
</html>
